<template>
  <div >
    <el-form :model="merchantParam" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="margin-top: 100px">
      <el-form-item label="店铺类型：" prop="merchantTypeId">
        <el-select v-model="merchantParam.merchantTypeId" placeholder="请选择"  >
          <el-option
            v-for="item in merchantType"
            :key="item.storeTypeId"
            :label="item.storeTypeName"
            :value="item.storeTypeId">
          </el-option>
        </el-select>
      </el-form-item>

        <el-form-item label="主营类目" prop="merchantKindsId"  style="width: 40%; ">
          <el-select v-model="merchantParam.merchantKindsId" placeholder="请选择"  >
            <el-option
              v-for="item in merchantKinds"
              :key="item.shopMainCategoriesId"
              :label="item.shopMainCategoriesName"
              :value="item.shopMainCategoriesId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="店铺名称" prop="merchantName">
          <el-input v-model="merchantParam.merchantName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="shopkeeperPhoneNumber" style="width: 40%">
          <el-input v-model="merchantParam.shopkeeperPhoneNumber" type="number">
          </el-input>
         <!-- <button type="button" v-show="show" @click="getCode">获取验证码</button>
          <button type="button" v-show="!show">{{ count }} 秒</button>-->
        </el-form-item>
      <el-form-item label="验证码" class="pr" >
        <el-input prop="code" v-model="code" placeholder="验证码" style="width: 20%"></el-input>
        <button @click="getCode" class="code-btn" :disabled="!show" style="height: 30px;">
          <span v-show="show">发送验证码</span>
          <span v-show="!show" class="count">{{count}} s</span>
        </button>
      </el-form-item>
      <el-form-item label="登录密码"  >
        <el-input v-model="password" ></el-input>
      </el-form-item>

      <el-form-item label="确认密码"  >
        <el-input  v-model="merchantParam.merchantPassword"></el-input>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button type="primary" size="medium" @click="handleNext('ruleForm')">下一步，提交身份证</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  export default {
    name: "merchantInfoDetail",
    props: {
      merchantParam: {
        type: Object
      },
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data(){
      var validatePass = (rule, value, callback) => {
         if(/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,20}$/.test(value)){
           callback(new Error('数字,大写字母,小写字母,特殊符,至少其中三种,长度为8~20'));
         }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      var authCode = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入验证码'))
        } else if (value !== this.code) {
          callback(new Error('验证码输入错误'))
        } else {
          callback()
        }
      }
      return{
        hasEditCreated:false,
        //选中店铺分类的值
       /* selectProductCateValue: [],*/
       /* productCateOptions: [],
        brandOptions: [],*/
        merchantType:"",  //店铺类型
        merchantKinds: [],  //店铺
        password:'',
        show: true,
        count: '',
        timer: null,
        code: '',
        rules: {
          merchantTypeId: [
            {required: true, message: '请选择店铺分类', trigger: 'blur'}
           /* */
          ],
          merchantKindsId: [{required: true, message: '请选择店铺主营类目', trigger: 'blur'}],
          merchantName: [{required: true, message: '请输入店铺名称', trigger: 'blur'},
                         {min: 1,max: 10,message: '长度在 1 到 10 个字符'}],
          shopkeeperPhoneNumber: [{ required: true,message: '请输入手机号码',trigger: 'blur'},
                                  {validator:function(rule,value,callback){
                                      if(/^1[34578]\d{9}$/.test(value) == false){
                                        callback(new Error("请输入正确的手机号"));
                                      }else{
                                        callback();
                                      }
                                    }, trigger: 'blur'}],
          password: [ {required: true,validator: validatePass,message: '请输入密码',trigger: 'blur'},
                      // { min: 8,max: 20,message: '长度在 8 到 20个字符'},
                     //  { pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,20}$/, message: '密码为数字，小写字母，大写字母，特殊符号 至少包含三种，长度为 8 - 20位，密码不能包含 用户名，公司名称(lidian), 公司域名(rekoon) （判断的时候不区分大小写)' }
                    ],
          merchantPassword: [{required: true,validator: validatePass2, message: '请入确认密码', trigger: 'blur'}],
          code: [{min:6, max:6, message: '请入验证码', trigger: 'blur'},

                ]
        }
      };
      },
    created() {
      this.getAllMerchantType();
      this.getMainCategories();
    },

    watch: {
      merchantParam:function(newValue){
        if(!this.isEdit)return;

        this.merchantParam=newValue;

      },

    },
    methods: {
      getAllMerchantType() { //获取类型
        this.$axios.get("http://localhost:8301/merchant/getAllMerchantType").then( respone => {
            this.merchantType=respone.data[0];
        });

      },
      getMainCategories() {
        this.$axios.get("http://localhost:8301/merchant/getMainCategories").then( respone => {
          this.merchantKinds=respone.data[0];
        })
      },
      handleNext(formName){

        console.log(formName)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$emit('nextStep');
          } else {
            this.$message({
              message: '验证失败',
              type: 'error',
              duration:1000
            });
            return false;
          }
        });
      },
      getCode() {
        this.$axios.get("").then(res => {

           this.code=res.data;
        });
        const TIME_COUNT = 60;
        if(!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if(this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      }
    }
  }


</script>
<style>
  .el-form-item__error {
    top:-22px;
  }
</style>
